設定元件樣式

在 PySide6 中如果要改變元件的外觀，可以使用 樣式表(Stylesheets) 。 樣式表使用類似 CSS 的語法，可以自訂外觀樣式。

1. 使用樣式表設置元件樣式

在 PySide6 中的元件有一個 setStylesheet 方法，用來設定樣式表，可以控制元件的顏色，邊框，自型等屬性。

範例 : 改變按鈕的樣式

下面範例是按鈕一有改變樣式，按鈕二沒有改變。

from PySide6.QtWidgets import QApplication, QPushButton, QWidget, QVBoxLayout
from PySide6.QtCore import Qt

class StyleExample(QWidget):
    def __init__(self):
        super().__init__()
        self.resize(300, 200)

        # 建立按鈕
        btn1 = QPushButton("按鈕1")
        btn2 = QPushButton("按鈕2")
        # 設置樣式表
        btn1.setStyleSheet("""
            QPushButton {
                background-color: #4CAF50;
                color: white;
                border-radius: 10px;
                padding: 10px;
                font-size: 16px;
            }
        """)

        # 建立佈局並添加按鈕
        layout = QVBoxLayout()
        layout.addWidget(btn1)
        layout.addWidget(btn2)
        self.setLayout(layout)

if __name__ == "__main__":
    app = QApplication([])
    window = StyleExample()
    window.show()
    app.exec()

2. 全局應用樣式表

除了可以單獨設定元件的樣式，也可以直接把整個應用設置相同的樣式表，這樣所有相同元件都會受到更改。

範例 ： 全局設置應用樣式表

from PySide6.QtWidgets import QApplication, QPushButton, QWidget, QVBoxLayout

class StyleExample(QWidget):
    def __init__(self):
        super().__init__()
        self.resize(300, 200)

        # 建立按鈕
        btn1 = QPushButton("按鈕1")
        btn2 = QPushButton("按鈕2")

        # 建立佈局並添加按鈕
        layout = QVBoxLayout()
        layout.addWidget(btn1)
        layout.addWidget(btn2)
        self.setLayout(layout)

if __name__ == "__main__":
    app = QApplication([])

    # 設置全局樣式表
    app.setStyleSheet("""
        QPushButton {
            background-color: #4CAF50;
            color: white;
            border-radius: 10px;
            padding: 10px;
            font-size: 16px;
        }
    """)

    window = StyleExample()
    window.show()
    app.exec()

3. 樣式選擇器

樣式的選擇器 : 可以針對特定狀態的元件設置樣式，例如懸停、按下，啟用或禁用等狀態。

• :hover : 當鼠標放在元件上面時的樣式。
• :pressed : 當鼠標按下元件上面時的樣式。
• :disabled : 當禁用元件時的樣式。

範例 ： 針對不同狀態設置樣式

from PySide6.QtWidgets import QApplication, QPushButton, QWidget, QVBoxLayout
from PySide6.QtCore import Qt

class StyleExample(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("PySide6 樣式表範例")
        self.resize(300, 200)

        # 建立按鈕
        btn1 = QPushButton("按鈕1")
        # 設置樣式表
        btn1.setStyleSheet("""
            QPushButton {
                background-color: #4CAF50;
                color: white;
                border-radius: 10px;
                padding: 10px;
                font-size: 16px;
            }
            QPushButton:hover {
                background-color: #45a049;
            }
            QPushButton:pressed {
                background-color: #2e7200;
            }
        """)

        # 建立佈局並添加按鈕
        layout = QVBoxLayout()
        layout.addWidget(btn1)
        self.setLayout(layout)

if __name__ == "__main__":
    app = QApplication([])
    window = StyleExample()
    window.show()
    app.exec()